<template>
  <div style="padding:30px">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="标题" clearable
          @keyup.enter.native="getList" />
      </el-form-item>
      <el-form-item label="所属大区" prop="marketId">
        <el-select v-model="queryParams.marketId">
          <el-option v-for="item in markets" :key="item.id" :label="item.label"
            :value="item.originalId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="margin:20px">
      <el-button @click="dialogVisible = true" v-hasPermi="['video:video:add']">新建视频</el-button>
    </div>
    <!-- 视频列表 -->
    <el-table border :data="videoList">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="author" label="作者" align="center" width="100"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="marketId" label="所属大区" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope"> {{AffiliationMarket(scope.row)}} </template>
      </el-table-column>
      <el-table-column prop="cover" label="封面" align="center" width="100">
        <template slot-scope="scope">
          <el-image style="width: 35px" :src="scope.row.cover"> </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="viewCount" label="播放数量" align="center" width="100"> </el-table-column>
      <el-table-column prop="url" label="视频地址" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="getVideoItemInfo(scope.row)" v-hasPermi="['video:video:query']">查看</el-button>
          <el-button size="mini" @click="deleteVideoItem(scope.row)" v-hasPermi="['video:video:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />
    <!-- 新增 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag title="提示" :visible.sync="dialogVisible" width="50%">
      <div>
        视频标题： <el-input v-model="addVideoTitle" style="width:200px"></el-input>
        作者： <el-input v-model="author" style="width:200px"></el-input>
        所属大区：<el-select v-model="marketId">
          <el-option v-for="item in markets" :key="item.id" :label="item.label"
            :value="item.originalId">
          </el-option>
        </el-select>
      </div>
      <div style="margin: 5px;">
        视频时长： <el-input v-model="duration" style="width:200px" placeholder="示例：00:00:00"></el-input>
        排序： <el-input v-model="orderNum" style="width:200px"></el-input>
      </div>

      <el-form :model="goodsQueryParam" :inline="true" style="margin-top:20px;">
        <el-form-item label="商品名称">
          <el-input v-model="goodsQueryParam.goodsName" placeholder="商品名称" clearable
            style="width:200px" />
        </el-form-item>
        <el-form-item label="商品id">
          <el-input v-model="goodsQueryParam.id" placeholder="商品id" clearable style="width:200px" />
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="goodsQueryParam.identifier" placeholder="商品编号" clearable
            style="width:130px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getGoodsList">搜索 </el-button>
          <el-button type="primary" @click="goodsQueryParam={};goodsList=[]">重置 </el-button>
        </el-form-item>
      </el-form>

      <el-table :data="goodsList" @selection-change="handleSelectionChanges" style="width:99%">
        <el-table-column type="selection" align="center" />
        <el-table-column label="商品名称" prop="goodsName" width="300" align="center" />
        <el-table-column label="商品编码" prop="identifier" align="center" />
        <el-table-column label="商品条码" prop="barCode" align="center" />
        <el-table-column label="商品id" prop="id" align="center" />
      </el-table>
      <pagination v-show="parseInt(goods.total) > 0" :total="parseInt(goods.total)"
        :page.sync="goods.pageNum" :limit.sync="goods.pageSize" @pagination="getGoodsList" />

      <div style="display:flex;flex-flow:row wrap;margin-top:20px;">
        <div v-loading="videoLoading"
          style="margin-right:2%;border:2px solid red;width:45%;padding:10px">
          <el-upload class="upload-demo" drag action="#" multiple ref="newlyVideoUpload"
            :file-list="files" :http-request="handleUpload" :on-remove="handleRemove"
            :on-success='handFileSuccess' :before-remove="beforeRemove" :auto-upload="false"
            :on-progress="uploadVideoProcess">
            <i class=" el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div style="margin:20px">
            <el-button type="primary" @click="fileChange(1)">上传视频</el-button>
          </div>
          <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
        </div>

        <div style="border:2px solid red;width:45%;padding:10px">
          <el-upload class="upload-demo" drag action="#" multiple ref="newlyCoverUpload"
            :file-list="files2" :http-request="handleUpload2" :on-remove="handleRemove2"
            :on-success='handFileSuccess2' :before-remove="beforeRemove2" :auto-upload="false"
            :on-progress="uploadVideoProcess2">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div style="margin:20px">
            <el-button type="primary" @click="fileChange(2)">上传封面图片</el-button>
          </div>
          <el-progress v-if="progressFlag2" :percentage="loadProgress2"></el-progress>
        </div>
      </div>
      <el-button @click="CancelUpload">取 消</el-button>
      <el-button type="success" @click="newlyBuild" style="margin-top:30px"
        :disabled="!videoStatus&&!imageStatus">新 建</el-button>
    </el-dialog>
    <!-- 视频详情 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag title="视频详情" :visible.sync="dialogVisible1" width="38%">
      <video :src="videoItemInfo.url" controls style="height:300px;width:100%"></video>
      <div style="margin-top:20px;">
        视频标题： <el-input v-model="videoItemInfo.title"> </el-input>
        作者： <el-input v-model="videoItemInfo.author"> </el-input>
        时长： <el-input v-model="videoItemInfo.duration"> </el-input>
        <div>
          <p>所属大区：</p>
          <el-select v-model="videoItemInfo.marketId">
            <el-option v-for="item in markets" :key="item.id" :label="item.label"
              :value="item.originalId">
            </el-option>
          </el-select>
        </div>
      </div>

      <div style="margin-top:20px;display:flex;align-items: center;">
        封面图片：<img :src="videoItemInfo.imgUrl" alt="" style="height:200px;margin-right:30px">
        <div style="border:1px solid red;padding:10px;width:300px;height:200px">
          <el-upload class=" upload-demo" drag action="#" multiple ref="upload2" :file-list="files2"
            :http-request="handleUpload2" :on-remove="handleRemove2" :on-success='handFileSuccess2'
            :before-remove="beforeRemove2" :auto-upload="false" :on-progress="uploadVideoProcess2">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div style="margin:20px">
            <el-button type="primary" @click="fileChange(2)">上传封面图片</el-button>
          </div>
          <el-progress v-if="progressFlag2" :percentage="loadProgress2"></el-progress>
        </div>
      </div>
      <el-button @click="upVideo" style="margin:20px">修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth"
import { getVideoList, addVideo, getVideoInfo, updateVideoInfo, deleteVideoInfo, uploadVideo, uploadImage, getMarketList } from '@/api/mallAdmin/video.js'
import { listGoodsSku } from "@/api/goods/goods"

export default {
  name: 'Video',
  data () {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 遮罩层
      loading: true,
      headers: {
        Authorization: "Bearer " + getToken(),
        "Content-Type": "multipart/form-data"
      },
      files: [],
      files2: [],
      dialogVisible: false,
      dialogVisible1: false,
      videoList: [],
      videoItemInfo: {},
      coverFileId: '',
      fileId: '',
      addVideoTitle: '',
      author: '',
      duration: '',
      orderNum: undefined,
      marketId: '',
      goodsQueryParam: {},
      goods: {},
      goodsList: [],
      goodsId: '',
      progressFlag: false,
      progressFlag2: false,
      loadProgress: 0,
      loadProgress2: 0,
      markets: [],
      videoLoading: false,
      videoStatus: false,
      imageStatus: false,
    }
  },
  created () {
    this.getMarkets()
    this.getList()
  },
  methods: {
    getMarkets () {
      getMarketList().then(res => {
        this.markets = res.data
      })
    },
    AffiliationMarket (row) {
      let a = ''
      this.markets.forEach(item => {
        if (item.originalId === row.marketId) {
          a = item.label
        }
      })
      return a
    },
    handleSelectionChanges (val) {
      this.goodsId = val[0].id
    },
    getGoodsList () {
      if (this.goodsQueryParam.goodsName || this.goodsQueryParam.id || this.goodsQueryParam.identifier) {
        listGoodsSku(0, this.goodsQueryParam).then(res => {
          this.goodsList = res.rows
        })
      }
    },
    // 新建视频
    newlyBuild () {
      addVideo({
        coverFileId: this.coverFileId,
        fileId: this.fileId,
        title: this.addVideoTitle,
        marketId: this.marketId,
        author: this.author,
        skuId: this.goodsId,
        duration: this.duration,
        orderNum: this.orderNum,
      }).then(res => {
        console.log(res)
        this.$modal.msgSuccess("新增成功")
        this.getList()
        this.dialogVisible = false
      })
    },
    // 获取列表
    getList () {
      getVideoList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.videoList = res.rows
          this.total = res.total
        }
      })
    },
    // 查看视频 详情
    getVideoItemInfo (val) {
      this.dialogVisible1 = true
      getVideoInfo(val.id).then(res => {
        if (res.code === 200) {
          this.videoItemInfo = res.data
          this.$set(this.videoItemInfo, 'imgUrl', res.data.cover)
        }
      })
    },
    // 修改 详情
    upVideo () {
      updateVideoInfo(this.videoItemInfo.id, this.videoItemInfo).then(res => {
        if (res.code === 200) {
          console.log(res)
        }
      })
    },
    // 删除
    deleteVideoItem (row) {
      deleteVideoInfo(row.id).then(res => {
        console.log(res)
      })
    },
    // 重置
    resetQuery () {
      this.queryParams = {}
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 30
      this.getList()
    },
    handleUpload (raw) {
      this.files.push(raw.file)
    },
    handleUpload2 (raw) {
      this.files2.push(raw.file)
    },
    fileChange (id) {
      if (id === 1) {
        this.videoLoading = true
        this.$refs.newlyVideoUpload.submit()
        let formData = new FormData()
        formData.append('file', this.files[0])
        uploadVideo(formData, { headers: this.headers }).then(res => {
          if (res.code === 200) {
            this.fileId = res.data.id
            this.$refs.newlyVideoUpload.clearFiles()
            this.files = []
            this.videoLoading = false
            this.videoStatus = true
            this.$modal.msgSuccess("上传成功")
          }
        })
      } else if (id === 2) {
        this.$refs.newlyCoverUpload.submit()
        let formData = new FormData()
        formData.append('file', this.files2[0])
        uploadImage(formData, { headers: this.headers }).then(res => {
          if (res.code === 200) {
            this.videoItemInfo.coverId = res.data.id
            this.videoItemInfo.imgUrl = res.data.url
            this.coverFileId = res.data.id
            this.$refs.newlyCoverUpload.clearFiles()
            this.files = []
            this.imageStatus = true
            this.$modal.msgSuccess("上传成功")
          }
        })
      }
    },
    uploadVideoProcess (event, file, fileList) {
      this.progressFlag = true; // 显示进度条
      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress = 100
        setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
      }
    },
    uploadVideoProcess2 (event, file, fileList) {
      this.progressFlag2 = true; // 显示进度条
      this.loadProgress2 = parseInt(event.percent); // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress2 = 100
        setTimeout(() => { this.progressFlag2 = false }, 1000) // 一秒后关闭进度条
      }
    },
    CancelUpload () {
      this.files = []
      this.files2 = []
      this.$refs.newlyVideoUpload.clearFiles();
      this.$refs.newlyCoverUpload.clearFiles();
      this.dialogVisible = false
    },
    handFileSuccess (file) {
      this.files = []
      this.$refs.newlyVideoUpload.clearFiles();
      console.log("数组长度=" + this.files.length)
    },
    handleRemove (file, fileList) {
      this.files = fileList
      console.log("数组长度=" + this.files.length)
    },
    beforeRemove (file, fileList) {
      console.log(file, fileList);
    },
    handFileSuccess2 (file) {
      this.files2 = []
      this.$refs.newlyCoverUpload.clearFiles();
    },
    handleRemove2 (file, fileList) {
      this.files2 = fileList
    },
    beforeRemove2 (file, fileList) {
      console.log(file, fileList);
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  top: 0;
  padding: 0;
}
::v-deep .upload-demo {
  width: 100%;
  height: 70%;
  .el-upload,
  .el-upload-dragger {
    width: 100%;
    height: 100%;
  }
}
</style>
